<template>
	<z-paging ref="paging" :fixed="false" v-model="list" @query="queryList">
		<div class="list flex">
			<div v-for="(item, index) in list" :key="index" class="item" :class="item.read_status == 't' && 'read'">
				<div class="video-box">
					<i class="status" v-if="!!item.sentiment_attr_name" :class="item.sentiment_attr == 1 ? 'status-1' : (item.sentiment_attr == 2 ? 'status-2' : 'status-3')"></i>
					<image mode="heightFix" :src="(item.gather_site_name=='新浪微博视频' ? 'https://image.baidu.com/search/down?url=': '')+(item.surface_img || item.retweeted_surface_img || (item.image && item.image[0]))" @click="play(item)"></image>
					<u-icon class="play" name="play-circle" size="60" @click="play(item)"></u-icon>
					<i class="source" :class="formatPlatform(item.publisher_site_name)"></i>
				</div>
				<div class="content">
					<div class="title text-cut2" @click="toDestail(item)">
						<span class="label">{{ item.publication_type==1?"原创":(item.publication_type==2?"转发":(item.publication_type==7?"评论":("弹幕"))) }}</span>
						<span class="label">{{ item.video ? "视频抽帧" : "文本识别" }}</span>
						<span v-html="marked(item.hit_keywords, (item.title || item.summary || item.retweeted_content))"></span>
					</div>
					<div class="time">{{ $u.timeFormat((item.router_time || item.publish_time)*1000, isToday((item.router_time || item.publish_time)*1000)?"hh:MM":"mm-dd hh:MM") }}</div>
					<div class="des flex">
						<div class="username flex">
							<u-avatar class="avatar" :src="item.avatar" size="30"></u-avatar>
							<span v-if="item.username" class="name text-cut">{{ item.username }}</span>
							<span class="flex" v-if="item.gather_site_name.includes('新浪')">
								<i class="v-1" v-if="item.verified_type==0 || item.verified==1"></i>
								<i class="v-2" v-else-if="item.verified_type>0 || item.verified==2"></i>
							</span>
						</div>
						<u-icon name="more-dot-fill" color="#333" size="28" @click="openAction(item)"></u-icon>
					</div>
				</div>
			</div>
		</div>
	</z-paging>
</template>

<script>
import { mapState } from "vuex";
import {
	articleList
} from "./../api/subject.js";
	
export default {
	data() {
		return {
			scrollTop: 0.01,
			statusBarHeight: uni.getStorageSync("statusBarHeight"),
			own: uni.getStorageSync("own"),
			list: [],
			params: {
				page: 1,
				limit: 20,
				filter_media: ["11"],
			},
			
			actionData: {
				row: {},
				flah: ""
			},
		};
	},
	watch: {
		isRefreshVideoList() {
			this.params.page = 1;
			this.scrollTop = this.scrollTop == 0 ? 0.01 : 0;
			this.getList();
		}
	},
	computed: {
		...mapState(["isRefreshVideoList", "multipleMode"]),
		tabIndex(){
			return this.$parent.tabCurrent
		}
	},
	mounted() {
		uni.$on("markRead",(ids)=>{
			if(!!this.list.filter(item=>ids.includes(item.id)).length){
				ids.map(id=>{
					this.$set(this.list.filter(item=>item.id == id)[0], "read_status", "t");
				})
			}
		});
		uni.$on("markSentiment",({id, val})=>{
			if(!!this.list.filter(item=>item.id == id).length){
				this.$set(this.list.filter(item=>item.id == id)[0], "sentiment_attr", val);
			}
		});
		this.$on("checkAll", (val)=>{ 
			this.$store.state.articleListLength =  val ? this.list.length : 0;
			this.list.map(item=>{
				this.$set(item, "checked", val);
			});
			this.$store.commit("selectedArticleHandle", this.list);
		});
	},
	methods: {
		getList(callback) {
			if(this.own.includes(45)){
				const queryParams = {
					...this.params,
					...this.$store.state.listParams,
					...this.$store.state.filterParams,
					filter_media: ["11"],
					limit: 20,
					id:!this.$store.state.subjects.length?[]:[this.$store.state.subjects[0].id]
				};
				if(this.params.page == 1 && !this.list.length) uni.showLoading({title: "加载中"});
				articleList(queryParams).then(({code, data})=>{
					if(this.$parent.tabCurrent == 2) uni.hideLoading();
					if(code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.$refs.paging.complete(data.list);
						this.$store.state.articleListLength = this.list.length;
						
						callback && callback();
					}
				});
			}
		},
		queryList(pageNo, pageSize) {
			this.params.page = pageNo;
			this.params.limit = pageSize;
			this.getList();
		},
		openAction(row) {
			this.$store.state.isAction = true;
			this.actionData = {
				row: row,
				flag: "videoList"
			};
			this.$emit("updateRow", this.actionData)
			uni.hideTabBar();
		},
		toDestail(e) {
			uni.$emit("markRead",[e.id]);
			this.$u.route("/pages/details/details",{
				id: e.id,
				l_id: e.l_id
			});
		},
		formatPlatform(name) {
			let val = "";
			switch(name){
				case "bilibili": val = "bilibili";break;
				case "百度百家": val = "baijia";break;
				case "抖音": val = "douyin";break;
				case "度小视": val = "du";break;
				case "好看视频": val = "haokan";break;
				case "今日头条": val = "toutiao";break;
				case "快手": val = "kuaishou";break;
				case "皮皮虾": val = "pipixia";break;
				case "搜狐新闻": val = "souhu";break;
				case "网易号": val = "wangyi";break;
				case "微视": val = "weishi";break;
				case "西瓜视频": val = "xigua";break;
				case "小红书": val = "xiaohongshu";break;
				case "新浪微博视频": val = "weibo";
			}
			return val;
		},
		play(row) {
			this.$u.route("/pages/videoPreview/videoPreview",{
				url: row.video ? row.video[0] : "",
				poster: row.surface_img,
				site: row.gather_site_name,
				source: row.url
			});
		},
		isToday(timestamp) {
		  const date = new Date(timestamp);
		  const today = new Date();
		  return (
		    date.getDate() === today.getDate() &&
		    date.getMonth() === today.getMonth() &&
		    date.getFullYear() === today.getFullYear()
		  );
		}
	},
};
</script>

<style lang="scss" scoped>
.main{
	height: 100%;
	overflow-y: auto;
}
.list{
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10rpx;
}
.item{
	width: calc(50% - 10rpx);
	height: 520rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
	border: 1rpx solid #E5E5E5;
	.item-l{
		margin-top: 4rpx;
	}
}
.sentiment{
	margin-right: 5rpx;
	font-size: 24rpx;
	padding: 4rpx 10rpx;
	border-radius: 5rpx;
	color: #fff;
}
.sentiment-1 {
	background: #3477FF;
}
.sentiment-2 {
	background: #F8B551;
}
.sentiment-3 {
	background: #E60012;
}
.video-box{
	width: 100%;
	height: 350rpx;
	overflow: hidden;
	position: relative;
	z-index: 1;
	background-color: #010101;
	text-align: center;
	
	.status{
		width: 102rpx;
		height: 48rpx;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
	}
	.status-1{
		background: url(./../static/icon-1.png) no-repeat left top/contain;
	}
	.status-2{
		background: url(./../static/icon-2.png) no-repeat left top/contain;
	}
	.status-3{
		background: url(./../static/icon-3.png) no-repeat left top/contain;
	}
	.play{
		color: #fff;
		cursor: pointer;
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.source{
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	z-index: 10;
	right: 30rpx;
	bottom: 30rpx;
	border-radius: 50%;
}
.video{
	width: 100%;
	height: 100%;
	margin: auto;
}
.content{
	padding: 10rpx;
	font-size: 24rpx
}
.label{
	display: inline-block;
	padding: 6rpx 10rpx;
	background: #E5E5E5;
	border-radius: 2rpx;
	font-size: 22rpx;
	line-height: 22rpx;
	color: #626262;
	margin-left: 5rpx;
	margin-right: 5rpx;
}
.title{
	font-size: 26rpx;
	line-height: 33rpx;
	font-weight: bold;
	height: 66rpx;
	word-break: break-all;
}
.time{
	margin: 8rpx 0;
}
.avatar{
	margin-right: 5rpx;
}
.name{
	max-width: 200rpx;
}
.des{
	align-items: center;
	justify-content: space-between;
}
.username{
	align-items: center;
}
.bilibili{
	background: url(./../static/video/bilibili.png) no-repeat center/contain;
}
.baijia{
	background: url(./../static/video/baijia.png) no-repeat center/contain;
}
.douyin{
	background: url(./../static/video/douyin.png) no-repeat center/contain;
}
.du{
	background: url(./../static/video/du.png) no-repeat center/contain;
}
.haokan{
	background: url(./../static/video/haokan.png) no-repeat center/contain;
}
.toutiao{
	background: url(./../static/video/toutiao.png) no-repeat center/contain;
}
.kuaishou{
	background: url(./../static/video/kuaishou.png) no-repeat center/contain;
}
.pipixia{
	background: url(./../static/video/pipixia.png) no-repeat center/contain;
}
.souhu{
	background: url(./../static/video/souhu.png) no-repeat center/contain;
}
.wangyi{
	background: url(./../static/video/wangyi.png) no-repeat center/contain;
}
.weishi{
	background: url(./../static/video/weishi.png) no-repeat center/contain;
}
.xigua{
	background: url(./../static/video/xigua.png) no-repeat center/contain;
}
.xiaohongshu{
	background: url(./../static/video/xiaohongshu.png) no-repeat center/contain;
}
.weibo{
	background: url(./../static/video/weibo.png) no-repeat center/contain;
}
.v-1,.v-2{
	margin-left: 5rpx;
	width: 20rpx;
	height: 20rpx;
	background: url("./../static/cert-1.png") no-repeat center/contain;
}
.v-2{
	background: url("./../static/cert-2.png") no-repeat center/contain;
}
.mask{
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 1);
	
	.back{
		position: absolute;
		z-index: 999;
		left: 40rpx;
		top: var(--status-bar-height);
	}
}
.read{
	color: #999;
}
</style>